{extend name="iframe" /}

{block name="body"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list">
            <form action="{:request()->url()}" method="post" class="xn_ajax" data-type="open">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型标识</label>
                    <div class="layui-input-inline">
                        <div class="layui-input-wrap">
                            <input type="text" name="type" placeholder="不存在可输入" class="layui-input" id="ID-TYPE" value="{$data.type|default=input('type')}" autocomplete="off">
                            <div class="layui-input-suffix">
                                <i class="layui-icon layui-icon-down"></i>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        仅支持字母、数字、下划线
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="非必须" autocomplete="off" class="layui-input" value="{$data.title}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上传图片</label>
                    <div class="layui-input-block">
                        {:xn_upload_one($data['image'],'image',0)}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="link" placeholder="非必须" autocomplete="off" class="layui-input" value="{$data.link}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" lay-submit class="layui-btn">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(function(){
        var dropdown = layui.dropdown;
        var $ = layui.$;
        // 渲染
        var inst = dropdown.render({
            elem: '#ID-TYPE',
            data: {$types|raw},
            style: 'min-width: 190px; box-shadow: 1px 1px 11px rgb(0 0 0 / 11%);',
            click: function(data){
                this.elem.val(data.title);
            }
        });
        // 输入框输入事件
        $(inst.config.elem).on('input propertychange', function(){
            var elem = $(this);
            var value = elem.val().trim();
            // 匹配到对应内容时，重载数据
            var dataNew = inst.config.data.filter(function(item){
                var exp = new RegExp(value.split('').join('|'), 'i');
                return exp.test(item.title);
            });
            dropdown.reloadData(inst.config.id, {
                data: dataNew, // 匹配到的新数据
                templet: function(d){
                    var exp = new RegExp(value.split('').join('|'), 'gi');
                    return d.title.replace(exp, function (str) {
                        return '<span style="color: red;">' + str + '</span>'
                    });
                }
            });
        });
    });
</script>
{/block}